<script setup lang="ts">
import { ref } from "vue";
import tree from "./tree.vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useStore } from "./utils/hook";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import EditPen from "@iconify-icons/ep/edit-pen";
import SearchIcon from "@iconify-icons/ri/search-line";
import Delete from "@iconify-icons/ep/delete";

import { DictSelect } from "@/components/common/DictSelect";

defineOptions({
  name: "StoreManagement"
});

const formRef = ref();
const treeRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  useRenderIcon,
  onSearch,
  resetForm,
  openDialog,
  handleDelete,
  openDetil,
  exportExcel,
  hasAuth,
  options2,
  deviceDetection,
  treeData,
  treeLoading,
  onTreeSelect,
  loadTree,
  handleCurrentChange,
  handleSizeChange,
  batchImport,
  ExportDownload,
  exportStore
} = useStore(treeRef);
</script>

<template>
  <div class="main">
    <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
      <tree
        ref="treeRef"
        :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[280px]']"
        :treeData="treeData"
        :treeLoading="treeLoading"
        @tree-select="onTreeSelect"
        @load-tree="loadTree"
      />
      <div
        :class="[
          deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-280px)]'
        ]"
      >
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
        >
          <el-form-item label="门店编码：" prop="storeCode">
            <el-input
              v-model="form.storeCode"
              placeholder="请输入门店编码"
              clearable
              class="!w-[180px]"
              @change="onSearch"
            />
          </el-form-item>
          <el-form-item label="门店名称：" prop="storeName">
            <el-input
              v-model="form.storeName"
              placeholder="请输入门店名称"
              clearable
              class="!w-[180px]"
              @change="onSearch"
            />
          </el-form-item>
          <el-form-item label="门店状态：" prop="status">
            <el-select
              v-model="form.status"
              placeholder="请选择"
              clearable
              class="!w-[180px]"
              @change="onSearch"
            >
              <el-option label="营业" value="0" />
              <el-option label="撤铺" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="经营属性：" prop="type">
            <DictSelect
              v-model="form.type"
              dict-type="BUSINES_ATR"
              clearable
              class="!w-[180px]"
              @change="onSearch"
            />
          </el-form-item>
          <el-form-item label="所属品牌：" prop="brandId">
            <el-select
              v-model="form.brandId"
              placeholder="请选择"
              clearable
              class="!w-[180px]"
              @change="onSearch"
            >
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.brandName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon('ri:search-line')"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>

        <PureTableBar
          class="w-full"
          style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
          title=""
          :columns="columns"
          @refresh="onSearch"
        >
          <template #buttons>
            <el-button
              v-if="hasAuth('store:btn:add')"
              type="primary"
              @click="openDialog()"
            >
              新增门店
            </el-button>
            <el-button
              v-if="hasAuth('store:btn:import')"
              type="primary"
              plain
              @click="batchImport('批量导入门店')"
            >
              批量导入
            </el-button>
            <el-button
              v-if="hasAuth('store:btn:export')"
              type="primary"
              plain
              @click="
                ExportDownload(form, pagination, exportStore, '门店列表.xlsx')
              "
            >
              批量导出
            </el-button>
            <el-button
              v-if="hasAuth('store:btn:iwa')"
              type="primary"
              plain
              @click="exportExcel('批量导入预警金额')"
            >
              导入预警金额
            </el-button>
          </template>
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              ref="tableRef"
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :loading="loading"
              :size="size"
              adaptive
              :adaptiveConfig="{ offsetBottom: 128 }"
              :data="dataList"
              :columns="dynamicColumns"
              :pagination="pagination"
              :paginationSmall="size === 'small' ? true : false"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(SearchIcon)"
                  @click="openDetil(row)"
                >
                  查看
                </el-button>
                <el-button
                  v-if="hasAuth('store:btn:edit')"
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(EditPen)"
                  @click="openDialog('编辑', row)"
                >
                  修改
                </el-button>
                <el-popconfirm
                  v-if="hasAuth('store:btn:delet')"
                  :title="`是否确认删除?`"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button
                      class="reset-margin"
                      link
                      type="danger"
                      :icon="useRenderIcon(Delete)"
                      :disabled="row.status == 0"
                    >
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
